import React, { Component } from 'react';
import pic from '../image/001.gif'
import "../styles/MyTabbar.css"
class MyTabbar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tab: [
                { pic, text: '首页' }, { pic, text: '分类' }, { pic, text: '全部商品' },
                { pic, text: '购物车' }, { pic, text: '个人中心' }
            ],currentIndex:0,
        }
    }

    handleClick(index){
        this.setState({
            currentIndex:index
        })
    }
    
    render() {
        return (
            <div className='mytabbar'>
                {
                    this.state.tab.map((item,index) => {
                        return (
                            <div className={`tab ${this.state.currentIndex == index ? "active" : ''}`} onClick={() => { this.handleClick(index)}}>
                                <img src={item.pic} alt="" />
                                <div className="name">{item.text}</div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default MyTabbar;